@require './recoConfig'
@require './code'
@require './custom-blocks'
@require './arrow'
@require './wrapper'
@require './toc'
@require './colorMixin'
@require './iconfont.css'

html, body
  padding 0
  margin 0
body
  font-family Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-size 16px
  color $textColor
  background-color #fff

.page
  overflow-x: hidden
  padding-left $sidebarWidth

.navbar
  position fixed
  z-index 20
  top 0
  left 0
  right 0
  height $navbarHeight
  box-sizing border-box

.sidebar-mask
  position fixed
  z-index 9
  top 0
  left 0
  width 100vw
  height 100vh
  display none
  background-color: rgba(0,0,0,.65);

.sidebar
  font-size 16px
  background-color #fff
  width $sidebarWidth
  position fixed
  z-index 10
  margin 0
  top $navbarHeight
  left 0
  bottom 0
  box-sizing border-box
  border-right 1px solid $borderColor
  overflow-y auto

.content__default:not(.custom)
  @extend $wrapper
  // > *:first-child
  //   margin-top 1.6rem
  a:hover
    text-decoration underline
  p.demo
    padding 1rem 1.5rem
    border 1px solid #ddd
    border-radius 4px
  img
    max-width 100%

.content__default.custom
  padding 0
  margin 0
  img
    max-width 100%

a
  font-weight 500
  color $accentColor
  text-decoration none

p a code
  font-weight 400
  color $accentColor

kbd
  background #eee
  border solid 0.15rem #ddd
  border-bottom solid 0.25rem #ddd
  border-radius 0.15rem
  padding 0 0.15em

blockquote
  font-size .9rem
  color #999
  border-left .25rem solid $accentColor
  margin 0.5rem 0
  padding .25rem 0 .25rem 1rem
  & > p
    margin 0

ul, ol
  padding-left 1.2em

strong
  font-weight 600

h1, h2, h3, h4, h5, h6
  font-weight 500
  line-height 1.25
  .content__default:not(.custom) > &
    margin-top (0.5rem - $navbarHeight)
    padding-top ($navbarHeight + 1rem)
    margin-bottom 0
    &:first-child
      margin-top -3.5rem
      margin-bottom 1rem
      + p, + pre, + .custom-block
        margin-top 2rem
  &:hover .header-anchor
    opacity: 1

h1
  font-size 1.95rem

h2
  font-size 1.65rem
  padding-bottom .3rem
  border-bottom 1px solid $borderColor

h3
  font-size 1.35rem

a.header-anchor
  font-size 0.85em
  float left
  margin-left -0.87em
  padding-right 0.23em
  margin-top 0.125em
  opacity 0
  &:hover
    text-decoration none

code, kbd, .line-number
  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace

p, ul, ol
  line-height 1.7

hr
  border 0
  border-top 1px solid $borderColor

table
  border-collapse collapse
  margin 1rem 0
  display: block
  overflow-x: auto

tr
  border-top 1px solid #dfe2e5
  &:nth-child(2n)
    background-color #f6f8fa

th, td
  border 1px solid #dfe2e5
  padding .6em 1em

.theme-container
  &.sidebar-open
    .sidebar-mask
      display: block
  &.no-navbar
    .content__default:not(.custom) > h1, h2, h3, h4, h5, h6
        margin-top 1.5rem
        padding-top 0
    .sidebar
      top 0

@media (min-width: ($MQMobile + 1px))
  .theme-container.no-sidebar
    .sidebar
      display none
    .page
      padding-left 0

@require 'mobile.styl'

.iconfont
  font-size: 0.9rem;
  color: #888;
  // &:not(:first-child)
  //   margin-left: 1rem
  // span
  //   margin-left: .5rem

/************** 滚动条 **************/
::-webkit-scrollbar
  width: 6px;
  height: 5px;

::-webkit-scrollbar-track-piece
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;

::-webkit-scrollbar-thumb:vertical
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;

::-webkit-scrollbar-thumb:horizontal
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;

/************** 流程图的滚动条 **************/
.vuepress-flowchart
  overflow: auto

/************** 腾讯 404 公益 **************/

.mod_404 .desc {
  .desc_link {
    display: inline-block
    // margin: 20px 0
    background: #424242!important
    color: #ffffff
    padding: 6px 20px!important
    text-decoration: none!important
    border-radius: 4px
  }
}

@media screen and (max-width: 720px) {
  .mod_404 .desc {
    margin: 50px 0
  }
}

/************** 评论功能 **************/

.comments-wrapper
  .valine-wrapper
    #valine.v
      .vwrap
        background: #f0f2f4
        // box-shadow: $boxShadow
        .vcontrol
          .vsubmit
            background: #fff
      .vinfo
        padding-left: .6rem
      .vlist
        padding: 0 .6rem
        border-radius: $borderRadius
        .vcard
          .vquote
            margin-left: 0
          .vimg
            border-radius: $borderRadius
            box-shadow: $boxShadow
            border: none
        .vh
          .vhead
            .vsys
              box-shadow: $boxShadow
          .vmeta
            margin-bottom: 1rem
            .vat
              margin-right: .3rem
              background: #f0f2f4
              box-shadow: $boxShadow
              border-radius: $borderRadius
              padding: 0 .4rem
              color: #313131
              border: 1px solid #ededed
          .vcontent
            background: #f0f2f4
            box-shadow: $boxShadow
            border-radius: $borderRadius
            margin: 0 .3rem
            padding: .1rem .6rem .05rem .6rem
            p .at
              color: #1abc9c
      .info
        padding-right: .6rem

/************** 分页 **************/
.pagation
  .pagation-list
    .jump, .jumpinp input
      box-shadow: $boxShadow

/************** 搜索框 **************/

.search-box input
  border-radius: $borderRadius

/********* 悬浮卡片背景颜色 **********/

.navbar
  background $backgroundColor
  .links
    background $backgroundColor

.home-blog
  .home-blog-wrapper
    .info-wrapper
      background $backgroundColor

.abstract-item
  background $backgroundColor

.category-wrapper
  .category-item
    background $backgroundColor

.pagation
  .jump
    background $backgroundColor
